<template>
	<view style="width: 100%;">
		<view class="head">
			<text class="head__icon"></text>
			<text class="head__text">最近使用</text>
		</view>
		<view class="nav-area" style="border-bottom: 23rpx solid #F8F8F8;">
			<view class="nav-area__box" @click="goModule(item.url,item.logo,item.title)" v-if="index<8" v-for="(item, index) in list" :key='index'>
				<view class="nav-area__box__frame">
					<image class="nav-area__box__frame__img" :src="item.logo" mode="aspectFill"></image>
				</view>
				<view class="nav-area__box__frame__text">
					<text>{{item.title}}</text>
				</view>
			</view>
			<view class="nav-area__kong" v-if="list.length%4" v-for="kong in 4-(list.length%4)"></view>
			<view class="nav-area__no" v-if="!list.length">
				暂无使用
			</view>
		</view>
		
		<view style="width: 100%;">
			<view class="content">
				<view class="head" style="width: 260rpx;height: 100%;display: flex;align-items: center;">
					<text class="head__icon"></text>
					<text class="head__text">已添加的服务</text>
				</view>
				<text class="content__text">首页默认显示前7个</text>
			</view>
			<view class="nav-area" style="border-bottom: 8rpx solid #F8F8F8;" :style="my_list.length<4?'height: 180rpx;':''">
				<view class="nav-area__box" @click="goModule(item.url,item.logo,item.title)" v-if="my_list.length" v-for="(item, index) in my_list" :key='index' style="margin-left: 42rpx;margin-right: 22rpx;width: 120rpx;height: 160rpx;margin-bottom: 24rpx; border-radius: 14rpx;display: flex;flex-direction: column;align-items: center;justify-content: space-evenly;">
					<view class="nav-area__box__frame" >
						<image class="nav-area__box__frame__img" :src="item.logo" mode="aspectFill"></image>
					</view>
					<view class="nav-area__box__frame__text">
						<text>{{item.title}}</text>
					</view>
				</view>
				<view class="nav-area__kong" v-if="my_list.length%4" v-for="kong in 4-(my_list.length%4)"></view>
				<view class="nav-area__no" v-if="!my_list.length">
					暂无服务
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {Debounce} from 'common/utils.js' // 防抖函数（减少函数的调用）
	
	export default {
		data() {
			return {
				list: [], //最近使用服务
				serve_info_list: [], //缓存服务
				my_list: [], //已添加的服务
			}
		},
		onLoad() {
			let self = this
			self.init()
			self.serve_info_list = uni.getStorageSync('serve_info')
			self.list = self.serve_info_list
			if(!self.serve_info_list) {
				self.serve_info_list = [],
				self.list = []
			}
			uni.$on('card_serve_info',function() {
				self.serve_info_list = uni.getStorageSync('serve_info')
				self.list = self.serve_info_list
				if(!self.serve_info_list) {
					self.serve_info_list = [],
					self.list = []
				}
			})
			uni.$on('manage',function() {
				self.init()
			})
		},
		methods: {
			/**
			 * @name 初始化
			 */
			init() {
				let self = this
				//我的服务
				self.$api.fAppServeGetMyList().then((res) => {
					self.my_list = res.data.result
				})
			},
			/**
			 * @name 服务类型跳转
			 * @param  url  跳转路径
			 * * @param  img  logo图路径
			 * * @param  title  标题
			 */
			goModule:Debounce(
			function(url,img,title){
				let serve_info = {
					title: title,
					logo: img,
					url:url
				}
				let filter_serve_info = this.serve_info_list.filter(res => res.title == title)
				if(this.serve_info_list.length ==0 || filter_serve_info.length == 0) {
					this.serve_info_list.unshift(serve_info)
					uni.setStorageSync('serve_info',this.serve_info_list)
					uni.$emit('card_serve_info') 
				}
				let is_out_link = new RegExp("^http://.*").test(url)
				if(is_out_link) {
					let styles = {
						scalable: false,
						kernel: "WKWebview",
						disablePlus: false,
						backButtonAutoControl: "close", //Webview窗口自动处理返回键逻辑
						progress: {
							color: "#0081FF"
						},
						popGesture: "none",
						titleNView: {
							style: 'transparent',
							backgroundColor: "#FFFFFF",
							titleText: serve_info.title,
							color: "#333333",
							autoBackButton: true,
							'padding-right': '16px',
						},
					
					}
					// #ifdef APP-PLUS
					plus.webview.create(url, 'details', styles).show(); // 显示窗口
					// #endif
				}
				if(!is_out_link) {
					if(url === '/pages/') {
						uni.showToast({
							title:'此服务暂未开放,敬请期待',
							icon:'none',
							duration:1000,
						})
					}else{
						uni.navigateTo({
							url: url
						})
					}
				}
			}),
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url:'/pages/index/manage/manage'
			})
		},
	}
</script>

<style scoped lang="less">
	.head {
		width: 260rpx;height: 100%;display: flex;align-items: center;
		&__icon {
			width: 11rpx;height: 34rpx;background-color: #3172B6;margin-left: 36rpx;
		}
		&__text {
			font-size: 30rpx;color: rgba(51,51,51,1);margin-left: 24rpx;
		}
	}
	
	.nav-area{
		width: 100%;
		margin-top: 46rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		flex-wrap: wrap;
		&__box {
			margin-left: 42rpx;margin-right: 22rpx;width: 120rpx;height: 160rpx;margin-bottom: 24rpx; border-radius: 14rpx;display: flex;flex-direction: column;align-items: center;justify-content: space-evenly;
			&__frame {
				width: 60rpx;height: 60rpx;
				&__img {
					width: 100%;height: 100%;
				}
				&__text {
					color: rgba(51,51,51,1);font-size: 30rpx;
				}
			}
		}
		&__kong {
			opacity: 0;margin-left: 42rpx;margin-right: 22rpx;width: 120rpx;height: 160rpx;margin-bottom: 24rpx; border-radius: 14rpx;display: flex;flex-direction: column;align-items: center;justify-content: space-evenly;
		}
		&__no {
			font-size: 28rpx;color: #999999;
		}
	}
	
	.content {
		width: 93.7%;padding: 9rpx 22rpx; display: flex;align-items: center;justify-content: space-between;
		&__text {
			font-size: 26rpx;color: rgba(153,153,153,1);
		}
	}
	
	.nav-area{
		width: 100%;
		margin-top: 46rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		flex-wrap: wrap;
	}
	
</style>
